<template>
  <div class="wrapper">
      <header>
          <van-nav-bar
  title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft"
/>
      </header>
      <main>
            <van-swipe @change="onChange"  indicator-color="#aaa">
                <van-swipe-item>
                    <img :src="detail.coverImg" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img :src="detail.coverImg" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img :src="detail.coverImg" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img :src="detail.coverImg" alt="">
                </van-swipe-item>
                <div class="custom-indicator" slot="indicator">
                    {{ current + 1 }}/4
                </div>
            </van-swipe>
            <div class="pdesc">
                <h2>{{detail.name}}</h2>
                <p>{{detail.descriptions}}</p>
                <p>￥{{detail.price}}</p>
            </div>
            <div>
            <van-coupon-cell
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            @click="couponsshow = true"
            />
            <!-- 优惠券列表 -->
            <van-popup v-model="couponsshow"  position="bottom">
              <van-coupon-list
              :exchange-button-disabled="exchangebd" 
                :coupons="coupons"
                :chosen-coupon="chosenCoupon"
                :disabled-coupons="disabledCoupons"
                @change="onChange"
                @exchange="onExchange"
              />
            </van-popup>
            </div>
            <div class="tiaojian">
                <p><van-icon name="passed" />&nbsp;&nbsp;三五退货</p>
                <p><van-icon name="passed" />&nbsp;&nbsp;&nbsp;特约供货基地</p>
                <p><van-icon name="passed" />&nbsp;&nbsp;&nbsp;品控质检</p>
            </div>
            <div class="active">
                <p>活动</p>
                <span>赠送积分</span>
                <p>购买本商品可获得17积分</p>
            </div>
            <div class="prodetail">
                <h2>———&nbsp;&nbsp;商品详情&nbsp;&nbsp;———</h2>
                <p>规格 &nbsp;&nbsp;&nbsp;&nbsp;1个/1.3-1.4kg</p>
                <p>级别 &nbsp;&nbsp;&nbsp;&nbsp;A级</p>
            </div>
            
      </main>
<van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服"            @click="onClickIcon" />
                <van-goods-action-icon icon="cart-o" @click="addcart" text="购物车" />
                <van-goods-action-button type="warning" text="加入购物车" @click="onClickCart" />
                <van-goods-action-button type="danger" text="立即购买" @click="onClickBuy" />
            </van-goods-action>
            <van-sku
                v-model="show2"
                stepper-title="我要买"
                :sku="sku"
                :goods="goods"
                :goods-id="goodsId"
                :quota="quota"
                :quota-used="quotaUsed"
                :hide-stock="sku.hide_stock"
                show-add-cart-btn
                reset-stepper-on-hide
                :initial-sku="initialSku"
            >
  <!-- 自定义 sku-header-price -->
            
            <template slot="sku-header-price">
               
              <div class="van-sku__goods-price">
                <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ detail.price }}</span>
              </div>
            </template>

  <!-- 自定义 sku actions -->
        <template slot="sku-actions">
          <div class="van-sku-actions">
      <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
        <van-button
          square
          size="large"
          type="danger"
          @click="toadd()"
         >
        确定
      </van-button>
    </div>
  </template>
</van-sku> 
<van-sku
    v-model="show"
    stepper-title="我要买"
    :sku="sku"
    :goods="goods"
    :goods-id="goodsId"
    :quota="quota"
    :quota-used="quotaUsed"
    :hide-stock="sku.hide_stock"
    show-add-cart-btn
    reset-stepper-on-hide
    :initial-sku="initialSku"
>
  <!-- 自定义 sku-header-price -->
            
<template slot="sku-header-price">
   
  <div class="van-sku__goods-price">
        <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ detail.price }}</span>
   </div>
</template>

  <!-- 自定义 sku actions -->
<template slot="sku-actions">
   <div class="van-sku-actions">
      <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
       <van-button
          square
          size="large"
          type="danger"
          @click="topay()"
         >
        确定
      </van-button>
    </div>
  </template>
</van-sku>      
  </div>
</template>

<script>

import * as api from '@/api/getProlist';
import * as addCartpro from '@/api/cart';
import axios from 'axios'
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元'
};

export default {
    
    name:'Detail',
    data(){
        return{
            detail:"",
            current:0,
            couponsshow:false,
            chosenCoupon: -1,
            coupons: [coupon],
            disabledCoupons: [coupon],
            exchangebd:false,
            sku:sku,
            show:false,
            show2:false,
            goods:{},
            goodsId:'',
            quota:0,
            quotaUsed:0,
            initialSku:{},
            id:'',
        }      
    },
    methods:{
      addcart(){
        this.$router.push('/cart')
      },
        onClickLeft() {
        this.$router.go(-1)

        },
        onClickIcon(){

        },
        onChange(index) {
            this.current = index;
        },
        onChange(index) {
            this.showList = false;
            this.chosenCoupon = index;
        },
        onExchange(code) {
          this.coupons.push(coupon);
        },
        onClickBuy() {
            this.show = true
        },
        onClickCart(){
            this.show2=true
        },

        onPointClicked(){
            console.log(1)
        },
        topay(){
            
             addCartpro.addCart({product:this.id,quantity:1}).then((data)=>{
            console.log(data.data)
            let url = '/buypro/'+this.id
            this.$router.push(url)
          })

        },
        toadd(){
          console.log(this.id)
          this.$toast('亲,已经添加购物车，请前往购物车')
          this.show2=false;
          addCartpro.addCart({product:this.id,quantity:1}).then((data)=>{
            console.log(data.data.data)
          })
        }

    },
    mounted(){
        this.id = this.$route.params.pid
        api.getPro(this.id).then((data)=>{
            console.log(data.data);
            this.detail=data.data
            this.sku.tree[0].v[1].previewImgUrl = this.detail.coverImg
            this.sku.tree[0].v[1].imgUrl = this.detail.coverImg
        })
    }
}

var sku= {
  // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
  // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
  tree: [
    {
      k: '规格', // skuKeyName：规格类目名称
      v: [
        {
          id: '30349', // skuValueId：规格值 id
          name: '1斤装', // skuValueName：规格值名称
          imgUrl: 'https://img.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
          previewImgUrl: 'https://img.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片
        },
        {
          id: '1215',
          name: '2斤装',
          imgUrl: 'https://img.yzcdn.cn/2.jpg',
          previewImgUrl: 'https://img.yzcdn.cn/2p.jpg',
        }
      ],
      k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
    }
  ],
  // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
  list: [
    {
      id: 2259, // skuId，下单时后端需要
      price: 100, // 价格（单位分）
      s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
      s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
      s3: '0', // 最多包含3个规格值，为0表示不存在该规格
      stock_num: 110 // 当前 sku 组合对应的库存
    }
  ],
  price: '1.00', // 默认价格（单位元）
  stock_num: 227, // 商品总库存
  collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
  none_sku: false, // 是否无规格商品
  messages: [
    {
      // 商品留言
      datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
      multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
      name: '留言', // 留言名称
      type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
      required: '1', // 是否必填 '1' 表示必填
      placeholder: '' // 可选值，占位文本
    }
  ],
  hide_stock: false // 是否隐藏剩余库存
}
</script>

<style scoped>
main .van-swipe-item{
  margin: 0 auto;
}
main .van-swipe-item img{
    display: block;
    width:80%;
    margin: 0 auto;
}
.custom-indicator{
    font-size:18px;
    text-align: center;
}
main .van-card{
    line-height: 40px;
    font-size: 30px;
    margin-top: 10px;
    border: 1px solid red;
    padding: 10px;
} 
main .van-card__title{
    height:100px;
}
main .pdesc{
    padding: 0 24px;

}
main .pdesc h2{
    font-size: 18px;
    color: #333;
    line-height: 36px;
}
main .pdesc p:nth-of-type(1){
    font-size: 14px;
    color: #999;
    line-height: 24px;
}
main .pdesc p:nth-of-type(2){
    font-size: 16px;
    color: rgb(245, 45, 10)
}
main .van-cell{
    margin:0 15px;
    width: 90%;
    background: rgb(255, 239, 236);
    margin-top: 10px;
    color:#333;
}
main .tiaojian{
  display: flex;
    box-sizing: border-box;
    padding: 2px 15px;
    margin-top: 20px;
}
main .tiaojian p{
    font-size: 12px;
    color: #999;
}
main .tiaojian p:nth-of-type(2){
    margin: 0 50px;
}
main .active{
    display: flex;
    padding: 3px 17px;
    margin-top: 16px;
}
main .active p{
    color: #999;
    font-size: 14px;
}
main .active span{
    border: 1px solid red;
    color: red;
    margin: 0 20px;
    padding: 2px
}
main .prodetail{
    color:#333;
    background: #f5f5f5c0;
    padding:5px 17px;
    margin-top: 15px
}
main .prodetail h2{
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 26px;   
}
main .prodetail p{
    font-size: 14px;
    padding: 10px 0
}
main .prodetail p:nth-of-type(1){
    border-bottom: 2px dashed #fff;
   
}
.wrapper{
    display: flex;
    flex-direction: column;
    height:100vh;
}
header{
  height:44px;
}
.wrapper main{
  flex:1;
  overflow:auto;
}
.wrapper .van-swipe-item{
  width:100%;
}
.wrapper .van-goods-action{
  position: relative;
  height:55px;
}

</style>